18.09.2014, 11:40
|
|
Аспирант
|
|
Регистрация: 09.09.2014
Сообщений: 48
|
|
|
Динамическое добавление формы и ajax-запросов
Здравствуйте! У меня есть форма запроса данных из бд посредством ajax'a и выводом результатов обратно в вид. В общем ситуация такая:
Два инпута работают отлично. Пробиваем читателя - выходит инфа по нему, затем пробиваем книгу, выходит инфа по книге. Но что если, нам надо добавить еще одну книгу для выдачи или 2, 3, 10 и т.д. на одного читателя? Как видите скрипт добавления новой строки таблицы реализован (почему-то кнопка добавления при нажатии "Просмотр" здесь не отрабатывает, хотя на сайте у меня всё работает).
Но к этому неопределённому кол-ву окошек прикрутить соответствующее неопределённое кол-во ajax-запросов-выводов инфы из бд не выходит.
Через ajax-запрос я только получаю инфу по штрих-коду из бд. Последующий процесс выдачи (запись в бд и т.д.) это у меня происходит через контроллер php, далее просто сделаю перебор глобального массива и всё.
<form action="" method="post" id='givecart'>
<form action="" method="post" id='givecart'>
<table border="1" class="menu-main" id="table_container">
<tr>
<td style="text-align: center; width: 100px">Читатель</td>
<td><input type="text" style="width: 100px" name="reader_barcode" id="reader" maxlength="8"></td>
<td style="width: 300px">
<span style="display: none" id="readererror" class="noreader">Читатель не найден в базе данных.</span>
<p>Фамилия: <font style="color:green"><span id="p1"></span></font></p>
<p>Имя: <font style="color:green"><span id="p2"></span></font></p>
<p>Отчество: <font style="color:green"><span id="p3"></span></font></p>
</td>
</tr>
<tr id="tr_image_1">
<td style="text-align: center" style="width: 100px" >Книга</td>
<td id="td_title_1"><input type="text" style="width: 100px" name="book_barcode" id="book" maxlength="8">
</td>
<td style="width: 300px">
<span style="display: none" id="bookerror" class="noreader">Книга не найдена в базе данных.</span>
<p>Фамилия: <font style="color:green"><span id="p4_1"></span></font></p>
<p>Имя: <font style="color:green"><span id="p5_1"></span></font></p>
<p>Название: <font style="color:green"><span id="p6_1"></span></font></p>
</td>
</tr>
</table>
<br><input type="button" style="width: 500px; height:35px;" value="Добавить еще одну книгу" name="addanotherbook" id="add"> </br>
<br><input type="submit" style="width: 500px; height:35px;" value="Выдать" name="givematerialbtn"></br>
</form>
<!--Скрипт поиска инфы по введённому штрих-коду.!-->
<script>
var x = document.getElementById('reader');
var y = document.getElementById('book');
x.focus();
x.onkeyup = x.onpaste = y.onkeyup = y.onpaste = function(){
var z = this;
setTimeout(function(){
z.value = z.value.replace(/[^\d]/g, '');
if (z.value.length == 8) {
var reader_barcode = $("#reader").val();
//alert ("Данные уходят: " + reader_barcode);
$.ajax({
type: "POST",
data: "reader_barcode=" + reader_barcode,
url: "ajax/finduser",
dataType: "json",
success: function(data){
if(data)
{
var rese = JSON.stringify(data);
//alert( "Прибыли данные: " + rese);
var readerlastname = data.user_last_name;
$("#p1").text(readerlastname);
var readerfirstname = data.user_first_name;
$("#p2").text(readerfirstname);
var readerpatronymic = data.user_patronymic;
$("#p3").text(readerpatronymic);
//console.log (JSON.stringify(data));
}
else
{
$("#readererror").css('display','inline');
}
}
});
y.focus();
}
if (y.value.length == 8) {
var book_barcode = $("#book").val();
//alert ("Данные уходят: " + book_barcode);
$.ajax({
type: "POST",
data: "book_barcode=" + book_barcode,
url: "ajax/findbook",
dataType: "json",
success: function(data){
if(data)
{
var rese = JSON.stringify(data);
//alert( "Прибыли данные: " + rese);
var authorlastname = data.author_last_name;
$("#p4_1").text(authorlastname);
var authorfirstname = data.author_first_name;
$("#p5_1").text(authorfirstname);
var bookname = data.content;
$("#p6_1").text(bookname);
//console.log (JSON.stringify(data));
}
else
{
$("#bookerror").css('display','inline');
}
}
});
return false
}
}, 0);
};
</script>
<!--Скрипт добавления новой строки в таблицу.!-->
<script>
var total = 1;
function add_new_image(){
total++;
$('<tr>')
.attr('id','tr_image_'+total)
//.css({lineHeight:'20px'})
.append (
$('<td style="text-align: center">')
.css({paddingRight:'5px',width:'100px'})
.append(
$('<span>Книга</span>')
)
)
.append (
$('<td>')
.attr('id','td_title_'+total)
.css({paddingRight:'5px'})
//.css({paddingRight:'5px',width:'300px'})
.append(
$('<input type="text" />')
.css({width:'100px'})
.attr('id','book_'+total)
.attr('name','book_barcode_'+total)
)
)
.append (
$('<td>')
.append(
$('<p><span>Фамилия: <font style="color:green"><span id="p4_'+total+'"></span></font></span></p>')
)
.append(
$('<p><span>Имя: <font style="color:green"><span id="p5_'+total+'"></span></font></span></p>')
)
.append(
$('<p><span>Название: <font style="color:green"><span id="p6_'+total+'"></span></font></span></p>')
)
)
.append(
$('<td>')
.css({width:'20px'})
.append(
$('<span id="progress_'+total+'" ><a href="#" onclick="$(\'#tr_image_'+total+'\').remove();" class="ico_delete"><img src="img/false.png" alt="del" border="0"></a></span>')
)
)
.appendTo('#table_container')
}
$(document).ready(function() {
$("#add").click(add_new_image);
});
</script>
|
|
18.09.2014, 13:34
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,277
|
|
|
Сообщение от Lobezki
|
|
Но к этому неопределённому кол-ву окошек прикрутить соответствующее неопределённое кол-во ajax-запросов-выводов инфы из бд не выходит.
|
Как вариант:
- собрать всю, нужную информацию
- отправить ее одним запросом
- полученный ответ разобрать "по окнам" |
|
18.09.2014, 14:00
|
|
Аспирант
|
|
Регистрация: 09.09.2014
Сообщений: 48
|
|
ksa, вариант интересный. Думал о похожем но в другой конструкции. И всё же возникает необходимость авто матически генерировать новую переменную (см. 75-ю строку).
...
var book_barcode = $("#book").val();
//alert ("Данные уходят: " + book_barcode);
$.ajax({
type: "POST",
data: "book_barcode=" + book_barcode,
...
|
|
18.09.2014, 14:07
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,277
|
|
|
Lobezki, да там можно слать не одну, а целую кучу переменных разом!...
|
|
18.09.2014, 14:33
|
|
Аспирант
|
|
Регистрация: 09.09.2014
Сообщений: 48
|
|
|
ksa, это понятно, вопрос в том, как реализовтаь автоматическое создание переменных?
напр. var book_barcode_1 = $("#book_1").val();
var book_barcode_+total = $("#book_"+total).val();
т.е. напр. var book_barcode_+total = $("#book_2").val();
var book_barcode_+total = $("#book_"+total).val();
т.е. напр. var book_barcode_+total = $("#book_3").val();
и т.д. Т.е. кол-во переменных по кол-ву созданных инпутов.
P.S. так новая переменная не создастся: var book_barcode_+total. Вопрос как?
|
|
18.09.2014, 14:50
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,277
|
|
|
Сообщение от Lobezki
|
|
вопрос в том, как реализовтаь автоматическое создание переменных?
|
Вообще-то есть массивы и объекты со свойствами...  |
|
18.09.2014, 14:53
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,277
|
|
|
Цитата:
|
data Объект, Строка
Данные, которые отсылаются на сервер. Если данные не являются строкой, то они конвертируются в строку запроса. Для запросов типа GET данные прикрепляются к URL. Для предотвращения этого, используйте опцию processData. Объект должен состоять из пар ключ/значение. Если значение представляет собой массив, то jQuery упорядочивает значения, принадлежащие одному ключу, например, {foo:["bar1", "bar2"]} превращается в ‘&foo=bar1&foo=bar2′.
|
http://jquery-docs.ru/Ajax/jQuery.ajax/
Читай документацию... |
|
18.09.2014, 15:13
|
|
Аспирант
|
|
Регистрация: 09.09.2014
Сообщений: 48
|
|
|
Короче как работать с массивом значений разобрался. Только я упустил одну деталь, то что не пойдёт мне отсылать всё одним массивом. Мне необходимо, ч.б. для каждого инпута поиск производился индивидуально.
Т.е. кликнул добавить еще одну книгу, высветилось поле ввода, ввел штрих-код, получил инфу,
опять кликнули добавить еще одну книгу, высветилось поле, ввели штрих-код, получил инфу и так ч.б. выводилась информация по стольким полям, сколько их надобавляет юзер.
Последний раз редактировалось Lobezki, 18.09.2014 в 15:48.
|
|
18.09.2014, 15:47
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,277
|
|
|
Сообщение от Lobezki
|
|
а как получить массив значений из моей формы? Подскажите, пожалуйста
|
Циклом...
Или строку сформируй, ее и отправь...
Ты программировать-то умеешь? |
|
18.09.2014, 15:49
|
|
Аспирант
|
|
Регистрация: 09.09.2014
Сообщений: 48
|
|
|
ksa,
изменил последний пост.
|
|
|
|
